<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field.options.displayStyle"
  >
    <div class="Box">
      <div v-for="(item, key) in waitingPatientInfos" class="queue" :key="key + widgetKey">
        <div class="titleName" :style="getStyle('head')">
          <ScrollX>
            {{
              optionsInfo?.titleType && item
                  ? item[optionsInfo.titleType]
                  : item?.treatmentRoomName || "\u00a0"
            }}
          </ScrollX>
        </div>
        <div class="contentBox">
          <div class="itemList">
            <div class="patientBox CurrentOrange">
              <ScrollX>
                {{ getCurrentPatient(item, "treatingPatient3") }}
              </ScrollX>
            </div>
            <div class="wait-patient">
              <vue-seamless-scroll
                  class="scroll"
                  :data="item.waitPatientList3"
                  :class-option="classOptionPatient"
                  :ref="`scroll-${item.workerId}`"
              >
                <div
                    v-for="(Wait3Item, Wait3Index) in item.waitPatientList3"
                    :key="Wait3Index"
                    class="waitItem FontOrange"
                >
                  <ScrollX>
                    候诊&nbsp;{{ Wait3Item.orderNo }}&nbsp;{{
                      Wait3Item.patientName
                    }}
                  </ScrollX>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
          <div class="itemList">
            <div class="patientBox CurrentGreen">
              <ScrollX>
                {{ getCurrentPatient(item, "treatingPatient4") }}
              </ScrollX>
            </div>
            <div class="wait-patient">
              <vue-seamless-scroll
                  class="scroll"
                  :data="item.waitPatientList4"
                  :class-option="classOptionPatient"
                  :ref="`scroll-${item.workerId}`"
              >
                <div
                    v-for="(Wait4Item, Wait4Index) in item.waitPatientList4"
                    :key="Wait4Index"
                    class="waitItem FontGreen"
                >
                  <div class="wait-item-inside">
                    候诊&nbsp;{{ Wait4Item.orderNo }}&nbsp;{{
                      Wait4Item.patientName
                    }}
                  </div>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from "uuid";
import emitter from "@/utils/designer/emitter";
import {pxToVw} from "@/utils/common";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {buildParentApi} from "@/utils/designer/util";

let buildParent = buildParentApi();
export default {
  name: "scene-waiting-call-records-TwoQueueMulTwoColus-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
  },

  components: {
    ScrollX,
    CompOperate,
    vueSeamlessScroll,
  },

  data() {
    return {
      optionsInfo: Object(),
      widgetKey: uuid(),
    };
  },
  computed: {
    // 温馨提示的滚动
    classOptionPatient() {
      let {openScroll, waitingNumber, waitingVisitStep} =
          this.field.options.sceneWaitingCallRecordsTwoQueueMulTwoColus;
      return {
        step: [1, 1.5, 2, 2.5, 3][waitingVisitStep - 1], // 数值越大速度滚动越快
        hoverStop: true,
        limitMoveNum: openScroll ? waitingNumber : 99999, // 开始无缝滚动的数据量 this.dataList.length
        direction: 1, // 0向下 1向上 2向左 3向右
      };
    },

    // 就诊和候诊的className名
    getClassName() {
      return function (val) {
        switch (val) {
          case "treatingPatient":
            return "current-patient";
          case "waitPatientList":
            return "wait-patient";
          case "waitPatientCount":
            return "patient-count";
          case "registerObjNames":
            return "register-name";
        }
      };
    },

    // 设置的各元素的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "color", info.headerFontColor);
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", info.headerBackgroundColor);
            return Obj;
          case "list":
            Reflect.set(Obj, "lineHeight", pxToVw(info.lineHeight));
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "listItem":
            Reflect.set(Obj, "lineHeight", pxToVw(info.lineHeight));
            Reflect.set(Obj, "height", pxToVw(info.lineHeight));
            return Obj;
        }
      };
    },

    // 列表的队列的患者
    waitingPatientInfos() {
      let listInfo;
      let devType = this.devType;
      let {showRowNums} = this.optionsInfo;
      let WaitingPatientList = this.$store.getters["getWaitingPatientInfo"];
      if (devType) {
        listInfo = WaitingPatientList.apiData;
      } else {
        listInfo = WaitingPatientList.mockData;
      }
      let grouping = this.optionsInfo.headerName;
      // const result = grouping.map((item) => {
      //   return { itemName: item, list: [] };
      // });
      let waitList = [];
      if (listInfo.length > showRowNums) {
        waitList = listInfo.slice(0, showRowNums);
        // return listInfo.slice(0, showRowNums);
      } else {
        let arr = new Array(showRowNums - listInfo.length)
            .fill()
            .map(() => ({}));
        waitList = [...listInfo, ...arr];
      }
      waitList = waitList.map((item, index) => {
        // result[Math.floor(index / grouping.length)].list.push(item);
        // 获取name
        item["itemName"] = grouping[index] ? grouping[index] : "";
        // 等候队列 - 区分三四级
        item["waitPatientList3"] = [];
        item["waitPatientList4"] = [];
        if (item && item["waitPatientList"]) {
          item["waitPatientList"].map((waitItem) => {
            if (waitItem["orderTag"] == "30") {
              item["waitPatientList3"].push(waitItem);
            } else {
              item["waitPatientList4"].push(waitItem);
            }
          });
        }
        // 正在就诊 - 队列区分三四级
        item["treatingPatient3"] = [];
        item["treatingPatient4"] = [];
        if (item && item["treatingPatient"]) {
          item["treatingPatient"].map((waitItem) => {
            if (waitItem["orderTag"] == "30") {
              item["treatingPatient3"].push(waitItem);
            } else {
              item["treatingPatient4"].push(waitItem);
            }
          });
        }
        return item;
      });
      return waitList;
    },

    // 当前就诊的患者|| 医生暂停接诊
    getCurrentPatient() {
      return function (val, target) {
        if (!val) return "暂停接诊";
        /**
         * 在线状态 0在线 1暂停 2退出
         **/
        const self = this;
        let type = parseInt(val.onlineStatus);
        switch (type) {
          case 0:
          case 2:
            if (!!val[target] && !!val[target].length) {
              let currentPatient = Array();
              val[target].forEach((item) => {
                let orderNo = item?.orderNo;
                let patientOrderNoInfo = "";
                if (!!orderNo) {
                  patientOrderNoInfo = `就诊 ${item.orderNo || "\u00a0"}`;
                }
                let temp = `${patientOrderNoInfo} ${
                    item.patientName || "\u00a0"
                }`;
                currentPatient.push(temp);
              });
              return self.$lodash.join(currentPatient, " ");
            } else {
              return "\u00a0";
            }
          case 1:
            return "暂停接诊";
        }
      };
    },
  },

  methods: {
    // 等待候诊滚动结束
    handleScrollEnd() {
      console.log("等待就诊滚动结束");
    },

    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "patientListInfo":
          this.widgetKey = uuid();
          let patientList = this.$lodash.cloneDeep(data);
          buildParent.executeParentMethod(
              "writeLog",
              JSON.stringify({sign: "模板-患者信息", key: key, data: data})
          );
          this.$store.dispatch("setWaitingPatientInfo", patientList);
          break;
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.Box {
  display: flex;
  justify-content: space-between;

  .titleName {
    width: 918px;
    height: 120px;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0059b3;
    color: white;
    border-radius: 20px 20px 0 0;
  }

  padding: 30px;
}

.contentBox {
  display: flex;
  justify-content: space-between;
  font-size: 42px;
}

.patientBox {
  width: 397px;
  height: 81px;
  border-radius: 20px;
  margin-top: 10px;
}

.CurrentOrange {
  background: #e58602;
  color: white;
}

.CurrentGreen {
  background: #05a598;
  color: white;
}

.waitItem {
  width: 450px;
  height: 95px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .wait-item-inside {
    padding: 0 24px;
    text-align: center;
    @include singleEllipsis(100%)
  }
}

.FontOrange {
  color: #e58602;
}

.FontGreen {
  color: #05a598;
}

.itemList {
  width: 450px;
  height: 650px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wait-patient {
  overflow: hidden;
  height: 650px;
  background: transparent;

  .wait-patient-inside {
    color: #333333;
    margin-top: 8px;
    font-size: 45px;
    background: rgba(255, 255, 255, 1);
    @include singleEllipsis(100%);
    text-align: center;
    padding: 30px 14px;
    display: block;
  }

  .wait-patient-inside-empty {
    min-height: 480px;
    margin-top: 10px;
    background: white;
  }

  &:first-child {
    background: red;
    margin-top: 0 !important;
  }
}

.scene-row-waiting-widget {
  background-color: transparent;
  color: #333;
  display: flex;
  flex-direction: row;
  align-self: center;
  align-items: center;
  margin: 0px 30px 10px 30px;
  overflow: hidden;

  .queue {
    font-size: 50px;
    flex: 1;
    padding: 0 12px;
    text-align: center;

    overflow: hidden;

    .queue-inside {
      border-radius: 24px;
      overflow: hidden;
      width: 100%;

      .dept {
        color: white;
        padding: 26px 40px;
        background: rgba(0, 89, 179, 1);
        @include singleEllipsis(100%);
        display: flex;
        flex-basis: 100%;
        text-align: center;
        align-self: center;
        align-items: center;
        justify-content: center;
      }

      .patient {
        background: rgba(51, 122, 194, 1);
        padding: 24px 0 22px 0;
        color: white;
        font-size: 45px;
        min-height: 86px;
        @include singleEllipsis(100%);
        display: block;
      }
    }
  }
}
</style>